<template>
  <base-breadcrumb :title="titleName">
    <a-card :bordered="false">
      <title-name title="科技活动信息"></title-name>
      <a-spin :spinning="loading">
        <a-form-model class="flex-model-form"
                      ref="addForm"
                      :model="form"
                      :rules="rules"
        >
          <a-row :gutter="24">
            <a-col :span="16">
              <a-form-model-item label="活动名称" prop="name">
                <BaseInput v-model="form.name" placeholder="请输入活动名称" :disabled="eidtabled"></BaseInput>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="活动编号">
                <BaseInput v-model="form.num" disabled placeholder="请输入活动编号"></BaseInput>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="活动类型" prop="activityTypeId">
                <SelectFormat
                  v-model="form.activityTypeId"
                  :disabled="eidtabled"
                ></SelectFormat>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="参与人员">
                <!-- <a-button
                  size="small"
                  v-for="(person, index) in checkedPerson"
                  :key="person.id"
                  style="margin-right: 10px;"
                >
                  {{ person.name }}
                </a-button> -->
                <a-tag
                  v-for="(person, index) in checkedPerson"
                  :key="person.id"
                  class="mb10"
                  :closable="!eidtabled"
                  color="#108ee9"
                  @close="handleRemove(index)"
                >
                  {{ person.name }}
                </a-tag>
                <a-button
                  v-if="!eidtabled"
                  icon="plus"
                  size="small"
                  type="primary"
                  ghost
                  @click="showPerson"
                >
                  添加
                </a-button>
                <!-- <a-button v-if="!eidtabled" type="primary" size="small" @click="showPerson">
                  添加
                </a-button> -->
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="参加人数" prop="empNumber">
                <BaseInputNumber :is-int="true" v-model="form.empNumber" placeholder="请输入参加人数" :disabled="eidtabled"
                ></BaseInputNumber>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="活动时间" prop="activityTime">
                <a-date-picker v-model="form.activityTime"
                               :disabled="eidtabled"
                               format="YYYY-MM-DD"
                               valueFormat="YYYY-MM-DD"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="16">
              <a-form-model-item label="活动地点" prop="address">
                <BaseInput v-model="form.address" placeholder="请输入活动地点" :disabled="eidtabled"></BaseInput>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="主办单位" prop="mainUnit">
                <BaseInput v-model="form.mainUnit" placeholder="请输入主办单位" :disabled="eidtabled"></BaseInput>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="组织单位" prop="mainUnit">
                <BSelectCompanyAndProject
                  :disabled="eidtabled"
                  :auto-select="form.id === ''"
                  :is-edit="form.id"
                  :user-type="form.orgType"
                  v-model="form.orgId"
                  :orgName="form.orgName"
                  :orgParentId="form.orgParentId"
                  @onSelectChange="form.orgName = $event.name;form.orgParentId = $event.parentId"
                >
                </BSelectCompanyAndProject>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="活动概要" prop="contents">
                <BaseTextarea v-model="form.contents" :maxLength="2000" :autoSize="{ minRows: 12, maxRows: 12}"
                              placeholder="请输入活动概要" :disabled="eidtabled"
                ></BaseTextarea>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="附件上传" prop="fileList">
                <upload-list
                  :disabled="eidtabled"
                  :businessCode="'STM06'"
                  :uploadArrys.sync="fileList"
                  @fileArrysData="handleFileUploaded"
                ></upload-list>
                <span style="color: #f5222d;">通知、照片、签到表等附件信息</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="创建人">
                <BaseInput v-model="form.creatorName" placeholder="请输入创建人" disabled></BaseInput>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="创建时间">
                <BaseInput v-model="form.createTime" placeholder="请输入创建时间" disabled></BaseInput>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-spin>
    </a-card>
    <div class="page-btn-right-top">
      <a-button
        v-if="!eidtabled"
        :loading="addLoading"
        :disabled="loading"
        type="primary"
        @click="submit"
      >
        提交
      </a-button>
      <a-button
        v-checkVisibleInDetail
        @click="$close"
      >
        关闭
      </a-button>
    </div>

    <selectPerson
      ref="dialogEdit"
      headerTitle="人员选择框"
      :form="{ whether: false }"
      :disabledOut="false"
      @confirm="confirmPerson"
    ></selectPerson>
  </base-breadcrumb>
</template>

<script>
// import selectPerson from './components/selectPerson.vue'
import selectPerson from '@/components/BComponents/BSelectPerson'
import BSelectCompanyAndProject from '@/components/BComponents/BSelectCompanyAndProject'
import UploadList from '@/components/UploadList'
import SelectFormat from './components/SelectFormat.vue'
import { activityList, activityAdd, getActivity, activityUpdate } from '@/api/science'
import moment from 'moment'
export default {
  name: 'a' + Date.now(),
  components: {
    selectPerson,
    SelectFormat,
    UploadList,
    BSelectCompanyAndProject
  },
  computed: {
    curType() {
      return this.$route.query.type
    },
    titleName() {
      const titleMap = {
        'add': '新增科技活动',
        'edit': '编辑科技活动',
        'look': '科技活动详情'
      }
      return titleMap[this.curType]
    },
    eidtabled() {
      return this.curType == 'look'
    },
    employee() {
      return this.$userInfo().employee
    }
  },
  data() {
    return {
      loading: false,
      addLoading: false,
      fileList: [],
      checkedPerson: [],
      form: {
        orgType: this.$userType(),
        name: '',
        orgId: '',
        orgParentId: '',
        orgName: '',
        num: '',
        mainUnit: '',
        activityTypeId: undefined,
        activityTime: '',
        address: '',
        empNumber: '',
        contents: '',
        fileList: [],
        creatorId: '',
        creatorName: '',
        createTime: '',
        worker: []
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        empNumber: [
          { required: true, message: '请输入参加人数', trigger: 'blur' }
        ],
        activityTypeId: [
          { required: true, message: '请选择活动类型', trigger: 'change' }
        ],
        activityTime: [
          { required: true, message: '请选择活动时间', trigger: 'change' }
        ],
        mainUnit: [
          { required: true, message: '请输入主办单位', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入活动地点', trigger: 'blur' }
        ],
        contents: [
          { required: true, message: '请输入活动概要', trigger: 'blur' }
        ],
        fileList: [
          { required: true, message: '请上传附件', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    showPerson() {
      this.$refs.dialogEdit.open(this.checkedPerson)
    },
    handleRemove(index) {
      this.checkedPerson.splice(index, 1)
    },
    init() {
      if (this.curType === 'add') {
        this.$refs.addForm.resetFields()
        this.form.creatorId = this.employee.userId
        this.form.creatorName = this.employee.name
        this.form.createTime = this.$dateFormat(new Date(), 'D')
        // let date = moment(new Date()).format('yyyy-MM-DD')
        // date = date.split('-')
        // let num = 0
        // num =  (Number(date[1] )-1) * 31 +  Number(date[2] )
        // this.form.num = date[0] + date[1] + date[2] + + num
      } else {
        this.getDetail()
      }
    },
    getDetail() {
      const param = {
        id: this.$route.query.id
      }
      this.loading = true
      getActivity(param).then((res) => {
        this.loading = false
        if (res.code == 200) {
          const data = res.data
          this.form.id = data.id
          this.form.name = data.name
          this.form.empNumber = data.empNumber
          this.form.orgId = data.orgId
          this.form.orgName = data.orgName
          this.form.orgType = data.orgType
          this.form.orgParentId = data.orgParentId
          this.form.num = data.num
          this.form.activityTypeId = data.activityTypeVO.id
          this.form.activityTime = data.activityTime
          this.form.address = data.address
          this.form.contents = data.contents
          this.form.createTime = data.createTime
          this.form.creatorName = data.creatorName
          this.form.creatorId = data.creatorId
          this.form.worker = data.worker
          this.form.mainUnit = data.mainUnit
          this.fileList = data.fileInfoList
          this.handleFileUploaded(data.fileInfoList)
          this.checkedPerson = data.employeeSerVOS
        }
      }).catch(() => {
        this.loading = false
      })
    },
    handleFileUploaded(list) {
      this.form.fileList = list.map(v => v.commonId)
    },
    subForm() {
      const params = {
        ...this.form
      }
      if (this.curType == 'add') {
        console.log(params)
        this.addLoading = true
        activityAdd(params).then((res) => {
          if (res.code == 200) {
            this.$message.success('添加成功')
            this.$close()
          } else {
            this.$message.success('添加失败！')
          }
        }).catch(() => {
          this.addLoading = true
        })
      } else {
        this.addLoading = true
        activityUpdate(params).then((res) => {
          if (res.code == 200) {
            this.$message.success('编辑成功')
            this.$close()
          } else {
            this.$message.success('编辑失败！')
          }
        }).catch(() => {
          this.addLoading = true
        })
      }
    },
    confirmPerson(list) {
      this.checkedPerson = list
      this.form.worker = list.map((v) => {
        return {
          orgId: v.orgId,
          employeeId: v.id
        }
      })
    },
    submit() {
      const that = this
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm({
            title: '提示',
            content: '确定是否提交？',
            okText: '确定',
            cancelText: '取消',
            onOk() {
              return new Promise((resolve, reject) => {
                const params = {
                  ...that.form
                }
                const text = that.curType == 'add' ? '添加' : '编辑'
                const api = that.curType == 'add' ? activityAdd : activityUpdate
                that.addLoading = true
                api(params).then((res) => {
                  if (res.code == 200) {
                    that.$message.success(text + '成功')
                    that.$close()
                    resolve()
                  } else {
                    that.$message.error(text + '失败！')
                    reject()
                  }
                }).catch(() => {
                  that.addLoading = false
                  reject()
                })
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.flex-model-form .ant-form-item {
  display: flex;
}
</style>

